<template>
    <div class="sdy-self">
        <sdyHeader title="啥都有" back>
        
        <template #title>
    
                <van-search v-model="searchText" shape="round" background="#c72418" placeholder="请输入搜索关键词"/>
        
        </template>
        <template #right>
            <van-button @click="searchHandler"  size="small" type="success">搜索</van-button>
            
        </template>

    </sdyHeader>
        
    <!--  搜索相关的内容显示 -->
    <!-- 如果没有文本的时候用这个，， -->
    <!-- <sdySearchHistory v-if="!searchText"></sdySearchHistory> -->
    <!-- 如果有文本的时候，，就有 -->
    <!-- <sdySearchList v-else="searchText"></sdySearchList> -->

    <!-- //换一个高级的解决方式 ;
    //动态组件

    // Vue 里面 给我们提供了一个  component  组件
    //是一个组件 , 但是不知道是什么
    //通过该组件 身上的一个 is 属性 ， 来决定 这个位置 渲染什么内容 -->


    <!-- 当  searchText 为  true 的时候  渲染  sdySearchList -->
    <!-- 当  searchText 为  false 的时候  渲染  sdySearchHistory -->
    <component :is="searchText ? sdySearchList : sdySearchHistory" ></component>
    </div>
</template>

<script setup lang="ts">
import sdySearchList from '@/views/sdy-search/components/sdySearchList.vue'
import sdySearchHistory from '@/views/sdy-search/components/sdy-history.vue'
import { provide, ref, watch } from 'vue'
import {useRouter, type Router } from 'vue-router'

//导入 相关 api  接口
import {  searchApi} from '@/api/goodslist'
//导入 相关 ts  接口
import type { MyhotItem } from '@/config/interface'
 
const $router : Router = useRouter()
//准备一个数据， 和   文本框  交互
const searchText = ref<string>('')

//准备一个点击搜索 的按钮
const searchHandler = () =>{
    const text = searchText.value
    // console.log(text)

    //非空验证
    if(! text) return

    // 路由跳转
    $router.push({ path: '/list',query: { search : text }})

}

// 随着搜索的关键字变化， 实时监控 最新的数据变化 ，，， 用 input 也行
//准备一个数组 ，表示搜索列表
const searchList = ref<MyhotItem[]>([]) 




// watch 监控  searchText
watch(searchText ,async ( ) => {

    if(!searchText.value.trim())  return

    const res= await searchApi(searchText.value.trim())
    console.log(res)
    searchList.value  = res.data
})
// 我们要循环 渲染， 在  sdySearchHistory 组件内渲染 ， 我们使用  provide()

provide('searchList' , searchList)


</script>

<style scoped lang="scss">


</style>